<!-- 调研组合面板-->
<template>

  <el-container>
    <el-header height="auto" class="layout-panel-el-header-wrapper">
      <span class="layout-panel-el-header-wrapper--title">{{ title }}</span>
      <span class="layout-panel-el-header-wrapper--code ">{{ _itemCode }}</span>
    </el-header>
    <el-main class="layout-panel-el-main-wrapper">
      <el-row class="layout-panel-el-main-wrapper-row">
        <el-col class="layout-panel-el-main-wrapper-col P-R-16" :span="10">
          <ResearchInfo ref="research" />
        </el-col>
        <el-col class="layout-panel-el-main-wrapper-col P-R-16" :span="10">
          <NeedInfo />
        </el-col>
        <el-col class="layout-panel-el-main-wrapper-col" :span="4">
          <TimeLine />
        </el-col>
      </el-row>
    </el-main>
    <el-footer class="layout-panel-el-footer-wrapper" :height="footerHeight">
      <template v-if="showFooter">
        <pure-button label="提交" :loading="submitButtonLoading" @click="submit" />

        <pure-button
          v-if="hiddenSaveButton"
          :loading="saveButtonLoading"
          type="wire-frame"
          label="保存"
          @click="save"
        />
      </template>

    </el-footer>
  </el-container>

</template>

<script>
import { mixins_base, } from '@/minxins/project';
export default {
  components: {
    NeedInfo: () => import('../panels/needInfo.vue'),
    TimeLine: () => import('../timeLine/index.vue'),

    ResearchInfo: () => import('../panels/researchInfo.vue'),

  },
  mixins: [mixins_base],
  props: {
    title: {
      type: String,
      default: '',
    },
    hiddenSaveButton: {
      type: Boolean,
      default: true,
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      submitButtonLoading: false,
      saveButtonLoading: false,
    };
  },
  computed: {
    footerHeight() {
      return (this.showFooter ? 60 : 16) + 'px';
    },
    _itemCode() {
      if (this.itemCode) {
        return `需求编号:${this.itemCode}`;
      }
      return '';
    },
  },
  mounted() {
  },
  methods: {
    done() {
      this.FETCH_PERFORM_EVENT({ name: 'process', });
      this.$emit('done');
    },
    async submit() {
      try {
        this.submitButtonLoading = true;
        await this.$refs['research'].submit('confirm');
        this.submitButtonLoading = false;
        this.done();
      } catch (error) {
        this.submitButtonLoading = false;
        this.$message.error(error);
      }
    },
    async  save() {
      try {
        this.saveButtonLoading = true;
        await this.$refs['research'].submit('save');
        this.saveButtonLoading = false;
        this.done();
      } catch (error) {
        this.saveButtonLoading = false;
        this.$message.error(error);
      }
    },
  },
};
</script>
<style lang='scss' scoped>
@import '../../style/project.scss';

</style>
